<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less">
    <link rel="stylesheet/less" href="./less/spellDeals.less">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <div class="spell">拼团购</div>
                    <a href="./index.html">
                        <img src="./img/arrow_back.png">
                    </a>
                </header>
            </div>
            <div class="scroll">
                <div class="carousel slide" data-ride="carousel">
            
                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img :src="goodsImage[0]">
                    </div>
                    <div class="carousel-item">
                        <img :src="goodsImage[1]">
                    </div>
                    </div>
                </div>
                <div class="spellGroup">
                    <ul>
                        <li>¥{{buyingPrice}}</li>
                        <li>{{numberPeople}}人团中{{winningPeople}}人</li>
                    </ul>
                    <ul>
                        <li>拼中获得积分补贴</li>
                        <li>未拼中获得{{subsidy}}元补贴</li>
                    </ul>
                </div>
                <div class="card_share">
                    <ul>
                        <li>{{goodsName}}</li>
                        <li>
                            <img src="./img/card_icon_share.png">
                        </li>
                    </ul>
                </div>
                <div class="bulk">
                    <ul>
                        <li>正在拼的团</li>
                        <li @click="showAll">
                            <ul>
                                <li>查看全部</li>
                                <li>
                                    <img src="./img//arrow_right.png">
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul v-for="(item,index) in group" class="groupSituation">
                        <li>?</li>
                        <li>
                            <ul>
                                <li>已拼{{item.joinNumber}}/{{item.openGroup}}</li>
                                <li>{{item.time}}</li>
                            </ul>
                        </li>
                        <li @click="order(item.teamId)" :class="spellStatus?'select':'default'">立即拼购</li>
                    </ul>
                </div>
                <div class="flowChart">
                    <ul>
                        <li>拼购流程</li>
                        <li>
                            <img :src="gtId==5?'./img/newZone.png':'./img/flowChart.png'">
                        </li>
                    </ul>
                </div>
                <div :class="gtId==5?'promptDefault':'promptSelect'">{{advIntroduction}}</div>
                <div class="goodsDetails">商品详情</div>
                <div class="detailImg">
                    <img :src="item" alt="" v-for="(item,index) in detailImg"> 
                </div>
                <div class="goodsBottom">已经到底部了~</div>
            </div>
            <div class="openGroup" @click="openGroup">我要开团</div>
        </div>
        <div v-if="openGroupStatus">
            <div class="mask"  @click="showAll"></div>
            <div class="Popup">
                <div>正在拼的团</div>
                <div class="PopupScroll">
                    <ul v-for="(item,index) in group">
                        <li>?</li>
                        <li>
                            <ul>
                                <li>已拼{{item.joinNumber}}/{{item.openGroup}}</li>
                                <li>{{item.time}}</li>
                            </ul>
                        </li>
                        <li @click="order(item.teamId)" class="select">立即拼购</li>
                    </ul>
                </div> 
            </div>  
        </div>
        <div id="textToast" v-show="tooltip">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast weui-toast_text">
                <p class="weui-toast__content">{{tooltipName}}</p>
            </div>
        </div>
        <div id="dialogs" v-if="status">
            <div class="js_dialog" id="iosDialog1">
                <div class="weui-mask"></div>
                <div class="weui-dialog">
                    <div class="weui-dialog__bd">您现在可以作为团长发起开团，团长可以不参团，没参团成功一次，获取开团补贴。</div>
                    <div class="weui-dialog__ft">
                        <a href="javascript:" class="weui-dialog__btn weui-dialog__btn_default" @click="immediatelyOpenGroup">立即开团</a>
                        <!-- <a href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">查看开团权益</a> -->
                    </div>
                </div>
            </div>
        </div>
        <div id="loadingToast" v-if="loadingStatus">
            <div class="weui-mask"></div>
            <div class="weui-toast">
                <span class="weui-primary-loading weui-icon_toast">
                  <span class="weui-primary-loading__dot"></span>
                </span>
                <p class="weui-toast__content">加载中</p>
            </div>
        </div> 
    </div>
</body>
</html>
<script type="module">
    import { goodsInfo, addteam } from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
    let app = new Vue({
        el: '#app',
        data: {
            goodsImage: [],
            buyingPrice: '',
            goodsName: '',
            numberPeople: '',
            winningPeople: '',
            subsidy: '',
            advIntroduction: '',
            group:[],
            detailImg:[],
            status: false,
            tooltip: false,
            tooltipName: '',
            openGroupStatus: false,
            spellStatus: false,
            loadingStatus: false,
            gtId: null
        },
        created(){
            let that = this;
                that.details();
        },
        mounted(){
            let that = this;
                that.public.shareLink();
                that.loadingStatus = true;    
            setTimeout(() => {
                that.loadingStatus = false;
            },2000)

            setInterval(() => {
                that.details();
            },1000)

            if(localStorage.getItem("spellStatus")){
                that.spellStatus = localStorage.getItem("spellStatus");
            }
        },
        methods:{

            details(){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                    that.gtId = Number(query.gtId);

                goodsInfo({
                    goodsId: query.goodsId
                }).then(res=> {
                    
                    that.goodsImage = res.data.goodsCorps.goodsImage.split(',');
                    that.buyingPrice = res.data.goodsCorps.buyingPrice;
                    that.numberPeople = res.data.goodsCorps.numberPeople;
                    that.subsidy = res.data.goodsCorps.subsidy;
                    that.winningPeople = res.data.goodsCorps.winningPeople;
                    that.advIntroduction =  res.data.goodsCorps.advIntroduction;
                    that.goodsName = res.data.goodsCorps.goodsName;
                    
                    let  timeStamp = Date.parse(new Date());
                    let time = [];

                    for(let i = 0; i<res.data.goodsTeamList.length; i++){
                        let timeDifference = res.data.goodsTeamList[i].limitTime - timeStamp;
                        let h = parseInt((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        let m = parseInt((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
                        let s = parseInt((timeDifference % (1000 * 60)) / 1000);
                        let dateTime = (h < 10 ? ('0' + h) : h) + ':' + (m < 10 ? ('0' + m) : m) + ':' + (s < 10 ? ('0' + s) : s);
                        time.push({time:dateTime});
                    }
                    that.group = res.data.goodsTeamList;
                    that.detailImg = res.data.goodsCorps.goodsBody.split(',');
                    that.detailImg = that.detailImg.slice(0,that.detailImg.length-1);

                    function assign(target, args) {
                        if (target === null) return;
                            if (Object.assign) {
                                return Object.assign(target, args);
                            } else {
                                var _ = Object(target);
                                for (var j = 1; j < arguments.length; j++) {
                                    var source = arguments[j];
                                    if (source) {
                                        for (var key in source) {
                                            if (Object.prototype.hasOwnProperty.call(source, key)) {
                                                _[key] = source[key];
                                            }
                                        }
                                    }
                                }
                                return _;
                            }
                    };

                    let group = that.group.map(function(item,index){
                        return assign(item,time[index]);
                    })
                })
                .catch(error=>{
                    console.log(error);
                });
            },
            openGroup(){
                let that = this;
                let status = that.status;
                    that.status = !status;
                    that.details();
            },
            immediatelyOpenGroup(){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                let userData = JSON.parse(localStorage.getItem("userData"));
                
                if(userData == null){
                    let url = './login.html';
                    window.location.href = url;
                    return false;
                }
                    that.spellStatus = true;    
                    localStorage.setItem('spellStatus',true);
                addteam({
                    goodsId: query.goodsId,
                    memberId: userData.userId,
                    openGroup: that.numberPeople 
                }).then((res)=>{
                    that.status = false;
                    that.tooltip = true;
                    that.tooltipName = res.msg;  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)

                    if(res.code == 0){
                        that.details();
                    }
                })
                .catch((error)=>{
                    console.log(error);
                });
            },
            showAll(){
                let that = this;
                let openGroupStatus = that.openGroupStatus;
                    that.openGroupStatus = !openGroupStatus;
            },
            order(teamId){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                if(that.spellStatus){
                    let url = "./order.html?goodsId="+query.goodsId+"&goodsImage="+query.goodsImage+"&goodsName="+query.goodsName+"&buyingPrice="+query.buyingPrice+"&spec="+query.spec+"&teamId="+teamId;
                        window.location.href = url;
                }
            },
        },
    })
</script>